import React, { useState, useEffect } from "react";
import InterTime from "@/components/InterTime";
import Tabs from '@/components/Tabs'
import Taro from '@tarojs/taro';
import { getCurrentInstance, useReachBottom, usePullDownRefresh } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { fetchListUserAddress } from '@/server/shop';
import { backgroundObj, loginData } from '@/utils/utils'
import Router from '@/utils/router';
import "taro-ui/dist/style/components/icon.scss";
import "./index.scss";
const Card = (props) => {
  const { data } = props
  const { receiveUsername, cityName, districtName, provinceName, address } = data
  return <View className='address-wrapper'>
    <View className='left-info'>
      <View className='top-text'>{
        receiveUsername
      }</View>
      <View className='address-text'>{provinceName + cityName + districtName + address}</View>
    </View>
    <View className='edit-icon'>
      <View style={{ fontSize: Taro.pxTransform(42) }} className="at-icon at-icon-edit" onClick={() => {
        Router('setAddressBook', {
          args: {
            type: 'edit',
            detail: JSON.stringify(data)
          }
        })
      }}></View>
    </View>
  </View>
}
export default (props) => {
  const { params } = getCurrentInstance().router
  const [data, setData] = useState([])
  const [page, setPage] = useState({
    page: 1,
    limit: 20
  })

  useEffect(() => {
    fetchData()
  }, [page])
  useReachBottom(() => {
    setPage({
      ...page,
      page: page.page + 1
    })
  })

  usePullDownRefresh(() => {
    setData([])
    setPage(() => {
      return {
        page: 1, limit: 20
      }
    })

  })

  const fetchData = () => {
    fetchListUserAddress({ ...page, }).then(val => {
      const { userAddressList } = val
      Taro.stopPullDownRefresh()
      setData([...data, ...userAddressList])
    })
  }
  return <View className='AddressBookList_box'>
    {data.map((item, val) => {
      return <Card data={item} key={val}></Card>
    })}
    <Button onClick={() => {
      Router('setAddressBook', { args: { type: 'install', } })
    }} block color='primary' size='large'>
      新增地址
    </Button>
  </View>
};

